<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text</title>
</head>
<style>
    table{border: 1px solid black;}
    th,td{
        width: 200px;
        text-align: center;
        border: 1px solid black;
    }
</style>
<body>
    <!-- 转换成表格 -->
    <div class="box">
    <!--渲染区域-->
    </div>
    <button class="a">渲染数据</button><br>
    <!-- 额外要求：手动添加数据，自动追加到表格上 -->
    id：<input type="text" class="id"/>
    名称：<input type="text" class="name"/>
    价格：<input type="text" class="price"/><br>
    <button class="add">添加数据</button>
    <script>
        let data=[
            {
                id:1,
                name:'iPhone 15',
                price:5999,
            },
            {
                id:2,
                name:'iPhone 15 Pro',
                price:7999,
            },
            {
                id:3,
                name:'iPhone 15 Pro Max',
                price:8999,
            },
        ]
        let table=document.createElement('table');
        let thead=document.createElement('thead');//表头       
        let tbody=document.createElement('tbody');//表内容
        let tr1=document.createElement('tr')
        let box=document.querySelector('.box')
        let btn=document.querySelector('.a')
        function draw(){
            thead.append(tr1)           
            box.append(table)
            for (const key in data[0]) {
                let th=document.createElement('th')//头部格
                tr1.append(th)
                th.append(document.createTextNode(key))
                }
            for (const key in data) {
                tr=document.createElement('tr')//行
                for(const k in data[key]){
                    let td=document.createElement('td')//单元格
                    td.append(data[key][k])
                    tr.append(td)
                }
                tbody.append(tr)
            }
            table.append(thead)
            table.append(tbody)                      
        }
        btn.onclick=draw
        /////////////////////////////////////////////////////////
        let add=document.querySelector('.add')
        let id=document.querySelector('.id')
        let name=document.querySelector('.name')
        let price=document.querySelector('.price')
        add.onclick=function(){
            //存入data里
            o={}
            o.id=id.value
            o.name=name.value
            o.price=price.value
            console.log(o);
            data.push(o)
            console.log(data);
            ////显示在表格中
        let tr2=document.createElement('tr')
        for(var i=0;i<3;i++){
            let td=document.createElement('td')//单元格
            if(i==0)td.append(id.value)
            if(i==1)td.append(name.value)
            if(i==2)td.append(price.value)
            tr2.append(td)
            console.log(td);
        }
        tbody.append(tr2)
        table.append(tbody)
        }
    </script>
</body>
</html>